<template>
  <a-card>
    <a-table :data="listData">
      <template #columns>
        <a-table-column v-for="(item,i) of columns" :title="item.title" :data-index="item.dataIndex" :key="i++">
          <template v-if="item.title==='序号'" #cell="{ rowIndex}">
            {{ rowIndex + 1 }}
          </template>
          <template v-if="item.title==='添加时间'" #cell="{ record }">
            <a-tag> {{ moment(record["CreateTime"]).format("YYYY-MM-DD") }}</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="操作">
          <template #cell="{ record,rowIndex }">
            <a-space>
              <a @click="viewData(record)">编辑</a>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-card>
  <a-modal title="查看留言" :width="800" v-model:visible="boolData.isShow" :footer="null" @cancel="boolData.isShow===false">
    <a-form :model="addValue" auto-label-width>
      <a-form-item label="软件名称">
        <a-input v-model="addValue.SoftName" placeholder="类型名称" disabled/>
      </a-form-item>
      <a-form-item label="版本号">
        <a-input v-model="addValue.SoftVersion" placeholder="版本号"/>
      </a-form-item>
      <a-form-item label="下载地址">
        <a-input v-model="addValue.SoftDown" placeholder="下载地址"/>
      </a-form-item>
      <a-form-item label="简要说明">
        <a-textarea v-model="addValue.SoftNotice" placeholder="字数限制152字以内" max-length="152" allow-clear show-word-limit/>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="editData()">{{ addValue.ProjectId ? "编辑" : "添加" }}</a-button>
          <a-button @click="boolData.isShow=false">取消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          key: "序号",
          dataIndex: "TypeId",
        },
        {
          title: "软件名称",
          dataIndex: "SoftName",
        },
        {
          title: "版本号",
          dataIndex: "SoftVersion",
        },
        {
          title: "下载地址",
          dataIndex: "SoftDown",
        },
      ],
      listData: [], moment,
      boolData: {
        isShow: false,
      },
      addValue: {
        TypeId: 0,
        SoftName: "",
        SoftVersion: "",
        SoftDown: "",
        SoftNotice: "",
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await this.$Http.softType();
      if(res["Data"]) {
        this.listData = res["Data"];
      }
    },
    viewData(data) {
      this.boolData.isShow = true;
      this.addValue = data;
    },
    async editData() {
      await this.$Http.editSoftType({
        TypeId: this.addValue.TypeId,
        SoftVersion: this.addValue.SoftVersion,
        SoftDown: this.addValue.SoftDown,
        SoftNotice: this.addValue.SoftNotice,
      });
      await this.getData();
      this.boolData.isShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
a {
  cursor: pointer;
  }

.list {
  display: flex;justify-content: start;

  p {
    padding: 10px;
    }
  }
</style>
